import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Input } from 'antd-mobile'
import './ArticleDetail.css'

export default function ArtileDetail() {
  const navigate = useNavigate()
  const [data, setData] = useState({
    title: '这里是文章具体标题',
    content: '这里是文章具体内容',
    time: '2023-10-23',
    author: '作者',
    views: 0
  })
  const [comment, setComment] = useState([
    {
      name: '用户1',
      content: '这里是评论内容',
      time: '2023-10-23',
      address: '北京'
    },
    {
      name: '用户2',
      content: '这里是评论内容',
      time: '2023-10-23',
      address: '上海'
    }
  ])
  return (
    <div className='articleDetail'>
      <div className='articleDetail-header'>
        <h1>疾病详情</h1>
        <span onClick={() => { navigate(-1) }}>&lt;</span>
      </div>
      <div className="articleDetail-content">
        <h2>{data.title}</h2>
        <span>在线阅读 {data.time} {data.views}阅读</span>
        <p>{data.content}</p>
      </div>
      <div className="articleDetail-comment">
        <h2>评论区</h2>
        <p>共 {2} 条评论</p>
        <div className='articleDetail-ele'>
          {
            comment.map((item, index) => {
              return <div key={index} className='articleDetail-ele-item'>
                <p>{item.name}</p>
                <p>{item.content}</p>
                <p>{item.time} {item.address}</p>
                <Button>点赞</Button>
              </div>
            })
          }
        </div>
        <div className='articleDetail-comment-input'>
          <Input placeholder='请输入评论内容' />
          <Button>发表</Button>
        </div>
      </div>
    </div>
  )
}
